<script lang="ts" setup>

const props = defineProps({
  padding: {
    type: Boolean,
    default: true
  },
  paddingForm: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  layout: {
    type: String,
    default: 'tile'
  },
  light: {
    type: Boolean,
    default: false
  },
  titleMax: {
    type: Boolean,
    default: false
  }
})

</script>

<template>
  <div class="title-box">
    <div class="title-header">
      <div :class="['title-padding',light?'border-light':'border-nor']" />
      <div :class="['title-lb',light?'title-lb-lt':'',titleMax?'title-lb-max':'']">
        {{ title }}
      </div>
      <div :class="['title-end',light?'border-light':'border-nor']" />
    </div>
    <div :class="['content-box',padding?'content-box-pad':'',paddingForm?'content-box-pad-bottom':'',light?'border-light':'border-nor']">
      <div :class="['content-inner', layout==='tile'?'content-box-tile':(layout==='ver'?'content-box-ver':'')]">
        <slot />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.border-light{
  border-color: var(--w-color-bor-low)!important;
}
.border-nor{
  border-color: var(--w-color-bor)!important;
}

  .title-box{
    @include ver-group();
    flex:none;
    width:100%;
    box-sizing: border-box;

    .title-header{
      @include hor-group(start,start);
      width:100%;
      height:30px;
      overflow: hidden;
      position:relative;

      .title-padding{
        flex:none;
        width:20px;
        height:100%;
        margin-top: 15px;
        border-top:1px solid ;
        border-left:1px solid  ;
        border-top-left-radius: var(--w-bor-radius-ct);
      }

      .title-lb{
        flex:none;
        padding: 0 5px;
        box-sizing: border-box;
        height:100%;
        line-height:30px;
        vertical-align: middle;
        font-weight: bold;
      }
      .title-lb-lt{
        color:var(--w-f-color-light);
      }
      .title-lb-max{
        font-size: var(--w-size-title);
      }

      .title-end{
        flex:auto;
        width:100%;
        height:100%;
        margin-top: 15px;
        border-top:1px solid  ;
        border-right:1px solid  ;
        border-top-right-radius: var(--w-bor-radius-ct);
      }

    }

    .content-box{
      flex:none;
      width:100%;
      box-sizing: border-box;
      border-right:1px solid  ;
      border-left:1px solid  ;
      border-bottom:1px solid  ;
      .content-inner{
        flex:none;
        width:100%;
        box-sizing: content-box;
      }
    }
    .content-box-pad{
      padding: 0 10px 10px 10px ;
    }
    .content-box-pad-bottom{
      padding-bottom: 0 ;
    }
    .content-box-tile{
      @include tile-group() ;
    }
    .content-box-ver{
      @include ver-group() ;
    }
  }
</style>
